<template>
  <div :class="['home-container']">
    <u-swiper :list="list" height="360" img-mode="widthFix"></u-swiper>
    <div class="home-content">
      <div class="home-box" @click="toLogin">
        <div class="userinfo-left">
          <u-avatar :src="userInfo.avatar_url"></u-avatar>
          <div>
            <div class="nickname" v-if="userInfo.company">
              {{ userInfo.company.name}}
            </div>
            <div class="nickname">你好，{{ userInfo.nickname }}</div>
          </div>
        </div>
      </div>
      <u-row gutter="24" style="width: 100%">
        <u-col span="4" v-for="item in menuList" @click="toPage(item.url)">
          <div class="nav-item">
            <image style="width: 100%;height: 100rpx" :src="item.src" mode="heightFix"></image>
            <div>{{ item.name }}</div>
          </div>
        </u-col>
      </u-row>
    </div>
  </div>
</template>
<script>
export default {
  name: "my",
  data() {
    return {
      show: true,
      adUrl: '',
      list: [

      ],
      userInfo: {
        avatar: '../../static/image/default_avatar.png',
        nickname: '去登录'
      },
      companyName: '',
      menuList: [
        {
          name: '订单查询',
          url: '/pages/order/order',
          src: 'https://diandian-1300713889.cos.ap-shanghai.myqcloud.com/订单.png'
        },
        {
          name: '开票预约',
          url: '/pages/invoice/invoice',
          src: 'https://diandian-1300713889.cos.ap-shanghai.myqcloud.com/发票.png'
        },
        // {
        //   name: '费用预存',
        //   url: '/pages/recharge/recharge',
        //   src: 'https://diandian-1300713889.cos.ap-shanghai.myqcloud.com/费用预存.png'
        // },
        {
          name: '地址管理',
          url: '/pages/address/address',
          src: 'https://diandian-1300713889.cos.ap-shanghai.myqcloud.com/送货管理.png'
        },
        {
          name: '联系我们',
          url: '/pages/contact/contact',
          src: 'https://diandian-1300713889.cos.ap-shanghai.myqcloud.com/联系我们.png'
        }
      ]
    };
  },
  onLoad() {
    const userInfo = this.$store.state.userInfo || {}
    console.log('userInfo',userInfo)
    if (userInfo.id) {
      this.userInfo = userInfo
      if (this.userInfo.company) {
        this.companyName = this.userInfo.company.name + '—'
      } else {
        this.companyName = ''
      }
    }
    this.$api.bannerList(1).then(res => {
      this.list = res.map(item => {
        return  item.image
      })
      console.log(this.list)
    })
    this.$api.bannerList(2).then(res => {
      if (res.length) {
        this.adUrl =  res[0].image
      }
    })
  },
  methods: {
    toPage(url) {
      uni.navigateTo({
        url: url
      });
    },
    toLogin() {
      if (this.userInfo.id) {
        uni.navigateTo({
          url: '/pages/my/detail'
        });
      } else {
        uni.navigateTo({
          url: '/pages/user/login'
        });
      }
    }
  }
}
</script>

<style lang="scss">
.home-container {
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg,hsla(0,0%,96.9%,0),#f7f7f7,#f7f7f7),linear-gradient(180deg,#fccf00,#cbf7e9);
  .ad {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    .close-icon {
      position: absolute;
      top: -20rpx;
      right: -20rpx;
    }
    width: 450rpx;
  }
  .home-content {
    flex-grow: 1;
    overflow: auto;
    padding: 0 32rpx 32rpx 32rpx;
    .home-box {
      margin-top: 24rpx;
      border-radius: 14rpx;
      box-shadow: rgb(235, 235, 235) 5px 5px 5px;
      background-color: #ffffff;
      padding: 20rpx;
      .userinfo-left {
        height: 100%;
        margin-right: 15rpx;
        display: flex;
        align-items: center;
        .nickname {
          margin-left: 20rpx;
          font-size: 28rpx;
          color: #000000;
          font-weight: 700;
        }
        .tips {
          color: #838383!important;
          font-size: 24rpx;
          padding-top: 10rpx;
          margin-left: 20rpx;
        }
      }
    }
  }
  .nav-item {
    margin-top: 40rpx;
    border-radius: 14rpx;
    box-shadow: rgb(235, 235, 235) 5px 5px 5px;
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20rpx;
  }
}
</style>
